<script setup>
import { useAdminStore } from "@/stores/admin.js";
import AdminHeader from "@/components/admin/AdminHeader.vue";
import AdminNoLoginHeader from "@/components/admin/AdminNoLoginHeader.vue";
import AdminAside from "@/components/admin/AdminAside.vue";
import MainPage from "@/components/MainPage.vue";
import router from "@/router/router.js";

// 管理员界面的底层布局容器

const admin = useAdminStore();

let beforeUnload_time = ref();
let gap_time = ref();

// 关闭页面清除登录信息
onMounted(() => {
  window.addEventListener("beforeunload", () => beforeunloadHandler());
  window.addEventListener("unload", () => unloadHandler());
})

// 暴露退出方法
provide("exit", exit);

function beforeunloadHandler() {
  beforeUnload_time.value = new Date().getTime();
}

function unloadHandler() {
  gap_time.value = new Date().getTime() - beforeUnload_time.value;
  if(gap_time.value <= 10) {
    exit();
  }
}

function exit() {
  // 退出
  router.push("/admin/index");
  admin.logout();
}
</script>

<template>
  <div class="common-layout">
    <el-container class="el-container">
      <el-header height="50px">
        <admin-header v-if="admin.admin_id !== null"/>
        <admin-no-login-header v-if="admin.admin_id === null"/>
      </el-header>

      <el-container>
        <el-aside width="250px" class="el-aside">
          <admin-aside v-if="admin.admin_id !== null"/>
        </el-aside>

        <el-main>
          <main-page/>
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.el-header {
  padding: 0;
}
.el-menu {
  border: 0;
}
.el-main {
  padding: 0;
}
.el-aside {
  background-color: #2a3441;
}
</style>

